<template>
  <div>
        <div class="dir_video">
           <div :class="['video_one',$store.state.nowVideo==item.Vurl?'active':'']" @click="changeVideo(item.Vurl)" v-for="(item,index) in Vlist" :key="index">
              <van-icon name="tv-o"></van-icon>
              <span class="v_name">{{dirindex+1}}-{{index+1}}</span>
              <span>{{item.Vname}} </span>
           </div>
         </div>
  </div>
</template>
<script>
import {getDirVideo} from '../../api/course'
export default {
  props:["c_id","dir_id","dirindex"],
  data(){
    return {
        Vlist:[],
        flag:true,
    }
  },
  methods:{
    // 触发vuex中的mutions 改变当前播放视频地址
    changeVideo(vurl){
      this.$store.commit("changeNowVideo",vurl)
    },
    async getDirVideos(){
        var res=await  getDirVideo({
          CDid:this.c_id,//课程的_id
          _id:this.dir_id//目录的_id
        })
        console.log(res)
        this.Vlist=res.data.list;
        this.$store.commit("changeTotalVideo",res.data.list)
    }
  },
  created(){
    console.log(this.c_id,this.dir_id)
    this.getDirVideos();
  }
}
</script>
<style lang="less">
   .dir_video{
      .video_one{
        line-height: 40px;
        border-bottom:1px solid #e5e5e5 ;
      }
      .v_name{
        margin: 0 20px;
      }
    }
    .active{
      color: red;
      font-size: 16px;
    }
</style>